<template>
  <a-tooltip color="#fff" :overlay-style="{ maxWidth: '350px !important' }">
    <!--只有预览模式下节点名称不为发起节点的节点显示节点配置信息-->
    <template v-if="$props.name !== '发起节点' && isSilentMode" #title>
      <p class="text-content">
        <span class="text-gary">节点类型：</span>
        <span class="flex-1">{{ properties['flowable:dataType'] === 'fixed' ? '固定节点' : '自由节点' }}</span>
      </p>
      <p class="text-content">
        <span class="text-gary">审批方式：</span
        ><span class="flex-1">{{
          properties['flowable:multiInstance'] === 'parallel' ? '多人时并行审批' : '多人时串行审批'
        }}</span>
      </p>
      <p class="text-content">
        <span class="text-gary">审批结果产生方式：</span
        ><span class="flex-1">{{
          properties['flowable:resultType'] === 'every' ? '所有审批人同意' : '任一审批人同意或退回'
        }}</span>
      </p>
      <p class="text-content">
        <span class="text-gary">退回至：</span
        ><span class="flex-1">{{
          properties['flowable:backTo'] === 'Flow_0000002' ? '起始节点' : getNodeName(properties['flowable:returnTo'])
        }}</span>
      </p>
      <p v-if="properties['flowable:backTo'] === 'Flow_0000002'" class="text-content">
        <span class="text-gary">退回修改后重审起点：</span
        ><span class="flex-1">{{
          properties['flowable:backStartNode'] === id
            ? '当前节点'
            : getNodeName(properties['flowable:returnUpdateAfterApprovalNode'])
        }}</span>
      </p>
      <p class="text-content">
        <span class="text-gary">发起人可见：</span>
        <span class="flex-1"
          >{{
            properties['flowable:initiatorVisible']
              ? '允许发起人查看当前节点的审批结果'
              : '不允许发起人查看当前节点的审批结果'
          }}
        </span>
      </p>
      <p class="text-content">
        <span class="text-gary">去重处理：</span
        ><span class="flex-1">{{ properties['flowable:toRepeat'] ? '是' : '否' }}</span>
      </p>
      <p v-if="!properties.hideSignSetting" class="text-content">
        <span class="text-gary">电子签署主体：</span
        ><span class="flex-1">{{
          properties['flowable:signFlag']
            ? '当前节点审批过程中需要签署相应文件'
            : '当前节点审批过程中不需要签署相应文件'
        }}</span>
      </p>
    </template>
    <div class="lf-html-wrapper">
      <!-- <div v-if="true" class="active"></div> -->
      <Icon
        v-show="active && $props.name !== '发起节点' && !isSilentMode"
        size="24"
        color="#f00"
        class="close-icon"
        @mousedown="removeNode"
        ><CloseCircleSharp
      /></Icon>
      <div
        class="custom-html"
        :class="{
          active:
            (active && $props.name !== '发起节点' && !isSilentMode) ||
            $props.isCurrentNode ||
            (optionalNodes.length && optionalNodes.includes($props.id) && active)
        }"
      >
        <div class="custom-head" :class="{ gary: $props.name === '发起节点' || $props.isFinished }">{{ name }}</div>
        <div class="custom-body">
          <Icon
            size="20"
            class="custom-icon"
            :class="{ 'text-red': candidateUsersName === '未设置审批人' && name !== '发起节点' }"
            ><UsergroupAddOutlined
          /></Icon>
          <span v-if="name === '发起节点'">固定节点</span>
          <span v-else-if="candidateUsersName === '未设置审批人'" class="user-list text-red">{{
            candidateUsersName
          }}</span>
          <a-tooltip v-else :title="candidateUsersName">
            <span class="user-list">{{ candidateUsersName }}</span>
          </a-tooltip>
          <!-- <button @mousedown.stop="changeData()">修改标题</button> -->
        </div>
        <div class="suffix-icon">
          <Icon size="24" :color="$props.name === '发起节点' || $props.isFinished ? '#ccc' : '#07C160'"
            ><ArrowForwardCircleOutline
          /></Icon>
        </div>
      </div>
    </div>
  </a-tooltip>
</template>

<script lang="ts">
import { ref, defineComponent, computed, onMounted } from 'vue'
import { UsergroupAddOutlined } from '@vicons/antd'
import { ArrowForwardCircleOutline, CloseCircleSharp } from '@vicons/ionicons5'
import { Icon } from '@vicons/utils'
import { Modal, message } from 'ant-design-vue'
import { intersectionBy } from 'lodash-es'

export default defineComponent({
  name: 'UseTaskHtml',
  components: { UsergroupAddOutlined, ArrowForwardCircleOutline, CloseCircleSharp, Icon },
  props: {
    id: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/prop-name-casing
    'flowable:candidateUsersName': {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/prop-name-casing
    'flowable:candidateGroupsName': {
      type: String,
      default: ''
    },
    isCurrentNode: {
      type: Boolean,
      default: false
    },
    isFinished: {
      type: Boolean,
      default: false
    },
    graphModel: {
      type: Object,
      default: () => ({})
    },
    properties: {
      type: Object,
      default: () => ({})
    },
    optionalNodes: {
      type: Array,
      default: () => []
    },
    targetKey: {
      type: String,
      default: ''
    }
  },
  setup: (props, context) => {
    const { emit } = context
    const title = ref<string>(props.name)
    const active = ref<boolean>(false)
    const isSilentMode = ref<boolean>(false)
    props.graphModel.eventCenter.on('node:click', (el) => {
      setLineAnimation(el.data.id)
    })
    props.graphModel.eventCenter.on('blank:click', () => {
      if (props.optionalNodes.length === 0) {
        active.value = false
      }
    })
    isSilentMode.value = props.graphModel.editConfigModel.isSilentMode
    const candidateUsersName = ref<string>(
      props['flowable:candidateUsersName'] || props['flowable:candidateGroupsName'] || '未设置审批人'
    )

    // 获取画布中的节点列表
    const nodes = computed(() => {
      const arr = props.graphModel.nodes.filter((el) => {
        return el.type === 'userTask' && el.properties.name !== '抄送节点' && el.properties.name !== '发起节点'
      })
      return arr
    })

    onMounted(() => {
      setLineAnimation(props.targetKey)
    })

    const setLineAnimation = (targetId) => {
      active.value = targetId === props.id
      if (props.optionalNodes.includes(targetId)) {
        if (active.value) {
          const nodeIds = props.graphModel.getNodeIncomingNode(targetId)
          // 获取条件流转节点
          const getWayNode = nodeIds.find((item) => item.type === 'exclusiveGateway')
          // 获取条件流转节点的出边
          const getWayNodeOutEdges = props.graphModel.getNodeOutgoingEdge(getWayNode.id)
          // 获取当前节点的入边
          const currNodeInEdges = props.graphModel.getNodeIncomingEdge(targetId)
          // 获取条件流转节点的出边和当前节点的入边的交集
          const intersection: any[] = intersectionBy(getWayNodeOutEdges, currNodeInEdges, 'id')
          emit('selectOptionalNode', getWayNode.id, intersection[0].id, targetId)
        }
      }
    }

    // 根据id获取节点名称
    const getNodeName = (id) => {
      const currItem = nodes.value.find((item: any) => item.id === id)
      if (currItem) {
        return currItem.properties.name
      }
    }

    const changeData = () => {
      title.value = '标题hello-world'
      emit('changeData', title.value)
    }
    const removeNode = () => {
      Modal.confirm({
        title: '确认删除该节点吗？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          props.graphModel.deleteNode(props.id)
          message.success({
            content: 'ok',
            style: {
              display: 'none'
            }
          })
        },
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        onCancel() {
          message.success({
            content: 'ok',
            style: {
              display: 'none'
            }
          })
        }
      })
    }
    return {
      title,
      active,
      isSilentMode,
      candidateUsersName,
      changeData,
      removeNode,
      getNodeName
    }
  }
})
</script>

<style scoped>
.lf-html-wrapper {
  position: relative;
}
.lf-html-wrapper .custom-html {
  width: 168px;
  height: 68px;
  background-color: #fff;
  position: relative;
  top: 5px;
  left: 5px;
  box-shadow: 0px 3px 5px 1px #e0e0e0;
}
.lf-html-wrapper .custom-html .suffix-icon {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #fff;
  position: absolute;
  right: 5px;
  top: 15px;
}

.lf-html-wrapper .custom-head {
  color: #fff;
  background-color: #76c46f;
  height: 26px;
  line-height: 26px;
  text-align: center;
}
.lf-html-wrapper .custom-head.gary {
  background-color: #ccc;
}

.lf-html-wrapper .custom-body {
  color: #666;
  height: 50px;
  line-height: 50px;
}
.lf-html-wrapper .custom-body :deep(.user-list) {
  width: calc(100% - 40px);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.custom-icon {
  vertical-align: middle;
  margin-right: 5px;
}
.active {
  box-shadow: 0px 0px 5px 2px #f00 !important;
}

.text-red {
  color: #f00;
}
.text-gary {
  width: 140px;
  text-align: right;
  margin-right: 5px;
  color: #666;
}
.text-content {
  color: #333;
  display: flex;
}
.close-icon {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  right: -2px;
  top: -2.5px;
  z-index: 10;
}
</style>
